import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

import 'package:get/get.dart';
import 'package:getx_app/app/routes/app_pages.dart';
import 'package:image_picker/image_picker.dart';

import '../controllers/profile_detail_controller.dart';

class ProfileDetailView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<ProfileDetailController>(builder: (logic) {
      Widget _buildRow(String label, {Widget? trailing, GestureTapCallback? onTap}) {
        return Ink(
          child: InkWell(
            onTap: onTap,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    label,
                    style: TextStyle(
                      fontSize: 18,
                      color: Color(0xff323233),
                    ),
                  ),
                  Row(
                    children: [
                      if (trailing != null) trailing,
                      if (onTap != null) ...[
                        SizedBox(
                          width: 10,
                        ),
                        Icon(
                          Icons.arrow_forward_ios_outlined,
                          size: 16,
                          color: Color(0xff969799),
                        )
                      ]
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      }

      Widget _divider() {
        return Padding(
          padding: EdgeInsets.symmetric(horizontal: 15),
          child: Divider(),
        );
      }

      Future<void> _showAvatarPicker() async {
        final ImagePicker _picker = ImagePicker();
        Get.dialog(SimpleDialog(
          title: Text(
            '请选择图片',
            style: TextStyle(fontSize: 16),
          ),
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                TextButton(
                    child: const Text('拍照'),
                    onPressed: () {
                      _picker.pickImage(source: ImageSource.camera);
                      Get.back();
                    }),
                TextButton(
                    child: const Text('从图库选择'),
                    onPressed: () {
                      _picker.pickImage(source: ImageSource.gallery);
                      Get.back();
                    }),
              ],
            ),
          ],
        ));
      }

      void _showDatePicker() {
        showCupertinoModalPopup(
            context: Get.overlayContext!,
            builder: (_) => Container(
                  height: 400,
                  color: const Color.fromARGB(255, 255, 255, 255),
                  child: Column(
                    children: [
                      SizedBox(
                        height: 300,
                        child: CupertinoDatePicker(
                            mode: CupertinoDatePickerMode.date,
                            initialDateTime: DateTime.now(),
                            onDateTimeChanged: (val) {
                              logic.updateBirthDate(val);
                            }),
                      ),

                      // Close the modal
                      CupertinoButton(
                        child: const Text('确认'),
                        onPressed: () => Get.back(),
                      )
                    ],
                  ),
                ));
      }

      void _showGenderPicker() {
        int? _position;
        showCupertinoModalPopup(
            context: Get.overlayContext!,
            builder: (_) => Container(
                  height: 250,
                  color: const Color.fromARGB(255, 255, 255, 255),
                  child: Column(
                    children: [
                      SizedBox(
                        height: 160,
                        child: CupertinoPicker(
                          itemExtent: 50,
                          children: logic.genderList.map((i) => Text(i['title'])).toList(),
                          onSelectedItemChanged: (position) {
                            _position = position;
                          },
                        ),
                      ),
                      // Close the modal
                      CupertinoButton(
                        child: const Text('确认'),
                        onPressed: () {
                          logic.updateGender(_position);
                          Get.back();
                        },
                      )
                    ],
                  ),
                ));
      }

      return Scaffold(
        appBar: AppBar(
          title: Text("个人资料"),
        ),
        body: logic.isLoading
            ? Center(
                child: SpinKitPulse(
                  color: Get.theme.colorScheme.secondary,
                  size: 50.0,
                ),
              )
            : SingleChildScrollView(
                child: Column(
                  children: [
                    CupertinoButton(child: Text("HOME"), onPressed: (){
                      Get.toNamed(Routes.HOME);
                    }),
                    _buildRow(
                      "头像",
                      onTap: () => _showAvatarPicker(),
                      trailing: Row(
                        children: [
                          SizedBox(
                            width: 50,
                            height: 50,
                            child: CircleAvatar(
                              backgroundImage: (logic.userInfo!.avatar == null
                                  ? AssetImage('assets/images/avatar.png')
                                  : NetworkImage(
                                      logic.userInfo!.avatar,
                                    ) as ImageProvider),
                            ),
                          ),
                        ],
                      ),
                    ),
                    _divider(),
                    _buildRow("昵称", trailing: Text(logic.userInfo!.nickname!)),
                    _divider(),
                    _buildRow(
                      "性别",
                      onTap: () => _showGenderPicker(),
                      trailing: logic.userInfo!.gender == null ? Text("未知") : Text(logic.findGenderByVal(logic.userInfo!.gender)),
                    ),
                    _divider(),
                    _buildRow(
                      "生日",
                      onTap: () => _showDatePicker(),
                    ),
                  ],
                ),
              ),
      );
    });
  }
}
